<template>
	<div class="page">
		<div class="wos-menu wos-hand" >
			<div :class="menu === 'IP权限' ? 'active' : '' " @click="menu = 'IP权限'">IP权限</div>
			<div :class="menu === '安全' ? 'active' : '' " @click="menu = '安全'">安全</div>
			<div :class="menu === 'HTTPS' ? 'active' : '' " @click="menu = 'HTTPS'">HTTPS</div>
			<div :class="menu === '系统服务' ? 'active' : '' " @click="menu = '系统服务'">系统服务</div>
		</div>

		<div v-show="menu === '系统服务'" style="margin: 40px 10px; padding:20px;height:700px" >
			<div style="padding: 40px">
				<div class="wos-flex mb-20">
					<div class="wos-form-title">密码重置</div>
					<div><input type="checkbox" checked>&nbsp;&nbsp;启用</div>
				</div>
				<div class="wos-flex mb-20">
					<div class="wos-form-title">手机推送</div>
					<div><input type="checkbox" checked>&nbsp;&nbsp;启用</div>
				</div>
				<div class="wos-flex mb-20">
					<div class="wos-form-title">CGI</div>
					<div><input type="checkbox" checked>&nbsp;&nbsp;启用</div>
				</div>
				<div class="wos-flex mb-20">
					<div class="wos-form-title">ONVIF</div>
					<div><input type="checkbox" checked>&nbsp;&nbsp;启用</div>
				</div>
			</div>
		</div>

		<div v-show="menu === 'HTTPS'" style="margin: 40px 10px; padding:20px;height:700px" >
			<div style="padding: 40px">
				<button class="wos-btn wos-btn-disable" disabled>创建服务器证书</button>
				<button class="wos-btn wos-btn-disable" disabled>下载根证书</button>
			</div>
		</div>


		<div v-show="menu === '安全'" style="margin: 40px 10px; padding:20px;height:700px" >
			<div style="padding: 40px">
				<div class="wos-font-bold mb-20">
					<input type="checkbox">&nbsp;&nbsp;SSH使能
				</div>
				<div class="wos-font-bold mb-20">
					<input type="checkbox">&nbsp;&nbsp;流媒体直取使能
				</div>
			</div>
		</div>
		<div v-show="menu === 'IP权限'" style="margin: 40px 10px; padding:20px;height:700px" >
			<div class="wos-flex wos-flex-between mb-20">
				<div class="wos-menu wos-hand" >
					<input type="checkbox">&nbsp;&nbsp;启用
				</div>
				<div>
					<div class="wos-hand">
						<i class="iconfont icon-jia wos-green"></i> &nbsp; 添加
					</div>
				</div>
			</div>
			<div class="wos-menu wos-hand" style="width: 100%;text-align: left">
				<div :class="menu2 === '白名单' ? 'active' : '' " @click="menu2 = '白名单'">白名单</div>
				<div :class="menu2 === '黑名单' ? 'active' : '' " @click="menu2 = '黑名单'">黑名单</div>
			</div>
			<wos-table :record="names"></wos-table>
		</div>

		<div class="console">
			<button>默认</button>
			<button class="active">确定</button>
			<button>刷新</button>
		</div>
	</div>
</template>

<script>
    export default {
        name: "safe",
	    data:function () {
			return {
			    menu:"IP权限",
                menu2:"白名单",
                names:{
                    "thead": [
                        {
                            "type": "String",
                            "name": "IP地址"
                        },{
                            "type": "String",
                            "name": "编辑"
                        },{
                            "type": "String",
                            "name": "删除"
                        }
                    ],
                    "tbody": []
                }
			}
        }
    }
</script>

<style scoped>

</style>
